<template>
  <el-dialog
    custom-class="upd-order-car"
    v-el-drag-dialog="{ drag: true, full: true, resize: false, resizeWinFun: setDataGridHeight }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    :title="mdTitle"
    :width="'80%'">
    <div ref="dgtools" class="filter-container">
      <el-form
        :model="dg.ps"
        :inline="true"
        @keyup.enter.native="getDgList">
        <el-form-item label="订单起止日期">
            <el-date-picker
                v-model="dg.ps.sedate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 210px"
                value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-input 
            placeholder="订单需要座位数" 
            v-model="dg.ps.needSeats" 
            clearable
            style="width: 120px;"
          />
        </el-form-item>

        <el-form-item>
          <el-input 
            placeholder="车牌号" 
            v-model="dg.ps.plateNum" 
            clearable
            style="width: 120px;"
          />
        </el-form-item>

        <el-form-item>
          <el-input 
            placeholder="订单号" 
            v-model="dg.ps.orderNum" 
            clearable
            style="width: 120px;"
          />
        </el-form-item>
        
        <el-form-item>
            <el-select
                v-model="dg.ps.force"
                :placeholder="'强制查询'"
                style="width: 100px">
                <el-option label="非强制" value="0"></el-option>
                <el-option label="强制查询(忽略时间冲突)" value="1"></el-option>
            </el-select>
        </el-form-item>

        <el-button 
          type="primary" 
          icon="el-icon-search" 
          @click="getDgList">
          搜索
        </el-button>

        <el-button 
          type="primary" 
          icon="el-icon-check" 
          @click="onSubmit">
          确认设置
        </el-button>
        
        <el-tag style="margin-left: 10px;">
            <b>当前车辆：{{obj.plateNum ? obj.plateNum+'（'+obj.needSeats+'座）' : '未设置'}}</b>
        </el-tag>
      </el-form>
    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight - 100"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column 
        fixed="left" 
        type="index" 
        label="编号"
        align="center" 
        :resizable="false"  
        width="40">
      </el-table-column>
      <el-table-column 
        fixed="left" 
        type="selection" 
        align="center" 
        :resizable="false" 
        width="40">
      </el-table-column>

      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'plateNum'">{{row.plateNum}}</template>

          <template v-else>{{ getColVal(row, col.field) }}</template>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';

import * as orderService from "@/api/services/order.service";

export default {
  name: "UpdOrderCar",
  mixins: [ DataGridBase, DataGridResize],
  directives: { elDragDialog },
  props: {mdTitle: String, myData: Object},
  data() {
    let cols = [
      { label: "座位数", field: "seats", width: 60 },
      { label: "车牌号", field: "plateNum", width: 70 },
    ];
    return {
      dg: {// 表格参数对象
        dgName: 'dg',
        tbName: 'updOrderCarrTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 订单起止日期
          sedate: [], 
          // 订单需要座位数 eg：30
          needSeats: this.myData.obj.needSeats, 
          // 强制查询 eg：0非强制  1强制查询(忽略时间冲突)
          force: '', 
          // 车牌号 eg：川S88465
          plateNum: '',
          // 订单号
          orderNum: '',
        },
      },

      // 已设置对象
      obj: this.myData.obj,
    };
  },
  created() {
    const that = this;

    console.log('父级传入的数据', this.myData);

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods: {
    closeMd(){
      this.$emit('myClick', {state: false});
    },
    // 获取-表格列表
    getDgList() {
        const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
        ps.stime = ps.sedate?.length == 2 ? ps.sedate[0] : "";
        ps.etime = ps.sedate?.length == 2 ? ps.sedate[1] : "";
        delete ps.sedate;

        orderService.findCanUserCar(ps).then(res => {
            if(res.code == 1){
                let list = res.data;
                for(let i in list){ list[i].dgName = dg.dgName; }
                dg.list = list;
            }
        });
    },

    // 提交
    onSubmit() {
      const that = this, U = that.U, { id } = that.obj, rows = that.getSeledRows();

      if(rows.length !== 1){
        U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
      }else{
        U.qconfim(`确定更换订单的车辆吗？`).then(r => {
            if(r){
                let ps = {orderId: id, plateNum: rows[0].plateNum};
                orderService.changeCar(ps).then(res => {
                    if(res.code != 1){
                        U.qerror(res.msg);
                    }else{
                        U.qsuccess(res.msg);
                        
                        // 关闭弹框
                        that.closeMd();
                        // 调用父级方法
                        that.$emit('reloadDg');
                    }
                });
            }
        });

        
      }
    },
  },
}
</script>